<template>
	<view class="content">
		<view>
			<image src="../../static/bg.png" style="width: 100%;height: 398upx;position: relative;z-index: 1;"></image>
			<image src="../../static/logo.png" class="logo"></image>
			<!-- 后面做一键登录 -->
			<view class="regbox">
				<view class="regcontent">
					<view style="color: #666;font-size: 32upx;text-align: center;letter-spacing: 4upx;">忘记密码</view>
					<view class="fsb" style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic">
							<image src="../../static/l-1.png" style="width: 24upx;height: 34upx;margin-right: 10upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入手机号" v-model="phone" maxlength="20"/>
							<view class="f24" style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" @click="dyzm" v-if="flag">
								发送验证码
							</view>
							<view class="f24" style="width: 150upx;color: #1D84E8;height: 50upx;text-align: center;line-height: 50upx;" v-else>
								{{last_time}}s 
							</view>
						</view>
					</view>
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic" style="width: 100%;">
							<image src="../../static/l-6.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入验证码" class="flex-1" v-model="yzcode"/>
						</view>
					</view>
					<view class="fsb " style="border-bottom: 1upx solid #EEEFF1;padding: 40upx 10upx 20upx;">
						<view class="flex aic" style="width: 100%;">
							<image src="../../static/l-2.png" style="width: 34upx;height: 34upx;"></image>
							<input style="margin-left: 20upx;" placeholder="请输入新的密码" type="password" class="flex-1" v-model="password" maxlength="20"/>
						</view>
					</view>
					<button class="logbtn" :class="phone==''?'defeat':'fill'" @click="wisilogin()">确定</button>
					<view style="width: 480upx;color: #1D84E8;font-size: 28upx;text-align: center;" class="flex aic">
						<view class="flex-1 leftcont" @click="wisireg">注册账号</view>
						<view class="flex-1" @click="gologin()">登录</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	//倒计时
	var countdown = 60;
	var settime = function (that) {
	  if (countdown == 0) {
	    that.flag = true
	    countdown = 60;
	    return;
	  } else {
		  that.flag = false
		  that.last_time = countdown
	    countdown--;
	  }
	  setTimeout(function () {
	    settime(that)
	  } , 1000)}
	export default {
		data() {
			return {
				phone:'',
				password:'',
				yzcode:'',
				last_time:'',
				flag:true,
			}
		},
		components:{
		},
		onLoad(options) {
			
		},
		methods: {
			// 确认
			wisilogin(){
				let that = this
				if(that.phone == ''){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if(that.yzcode == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if(that.password == ''){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 1500
					});
					return
				}
				let postData = {
					accounts:that.phone,
					pwd:that.password,
					verify:that.yzcode
				}
				postAjax('User/ForgetPwd',postData,function(data){
					uni.showToast({	icon:'none',title:data.msg})
					if(data.code == 0){
						setTimeout(function () {
								uni.navigateTo({
									url:'login',
									duration: 1500
								})
						} , 2000)
					}
				})
			},
			// 获取验证码
			dyzm(){
				let that = this
				if(that.phone == ''){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 1500
					});
					return
				}
				
				
				postAjax('User/ForgetPwdVerifySend',{accounts:that.phone},function(data){
					
					uni.showToast({	icon:'none',title:data.msg})
					if(data.code == 0){
						settime(that)
					}
					
				})
			},
			//注册
			wisireg(){
				uni.navigateTo({
					url:'register',
					animationDuration:300
				})
			},
			// denglv
			gologin(){
				uni.navigateTo({
					url:'login',
					animationDuration:300
				})
			},
			
		}
	}
	
</script>

<style>
	.regbox{margin-top: -100upx;padding:0 30upx;position: relative;z-index: 10;}
	.regcontent{padding:50upx 96upx 110upx;background-color: #fff;border-radius: 20upx;box-shadow:0px 6px 13px rgba(29,132,232,0.2);}
	.logbtn{border-radius: 6upx;color:#fff;display:block;font-size: 30upx;border-radius: 4upx;width:456upx;height: 76upx;line-height: 76upx;text-align: center;padding: 0;margin: 100upx auto 40upx;}
	.logbtn::after{border: none;}
	.defeat{background: #ddd;}
	.third{width: 76upx;height: 76upx;}
	.line{width: 126upx;height: 2upx;background-color: #ddd;}
	.fill{background:linear-gradient(90deg,rgba(92,171,246,1) 0%,rgba(30,132,232,1) 100%);}
	.flex-1{flex:1;position: relative;}
	.leftcont::after{content: '';width: 2upx;height: 80%;background-color: #1D84E8;position: absolute;top:10%;right:0}
	.logo{position: absolute;width: 150upx;height: 30upx;top:150upx;left: 50%;margin-left: -75upx;z-index: 12;}
	/* .fillinp{padding-left: 16upx;font-size: 28upx;margin-left: 20upx;}
	.fillbox{padding:40upx 0 20upx;border-bottom: 2upx solid #eee;} */
</style>
